<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>正在加工</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.2}" rel="stylesheet"/>
    <th:block th:include="include :: header('正在加工')" />
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #container {
            position: relative;
            padding: 20px;
            height: 50px;
        }

        #left_side {
            position: absolute;
            top: 20px;
            left: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
        }

        #content {
            margin: 0px 210px 0px 210px;
            border: solid 0px #e7eaec;
            height: 100%;
            font-size:35px;
            text-align: center;
        }

        #right_side {
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
            font-size: medium;
            text-align: center;
        }
        .area {
            height: 700px;
            margin:20px 20px 0px 20px;
            background-color: white;
        }
        p{
            text-align: center;
            margin: 0px;
        }
        .textbtn:hover{
            color: black;
            cursor: pointer;
        }
        .textbtn:active{
            color: gray;
        }




        ol{
            list-style: none;
        }
        .time_line_box{
            position: relative;
            height: 60px;
            overflow: hidden;
        }
        .time_line{
            position: absolute;
            z-index: 1;
            left: 0;
            top: 49px;
            height: 2px;
            background: #dfdfdf;
            -webkit-transition: -webkit-transform 0.4s;
            -moz-transition: -moz-transform 0.4s;
            transition: transform 0.4s;
        }
        .order_item{
            position: absolute;
            bottom: 0;
            z-index: 2;
            text-align: center;
            font-size: 13px;
            padding-bottom: 15px;
            padding-right: 9px;
            color: rgba(0,0,0,0.5);
        }
        .order_item:after{
            content: '';
            position: absolute;
            left: calc(50% - 7px) ;
            right: auto;
            transform: translateX(-50%);
            bottom: -7px;
            height: 14px;
            width: 14px;
            border-radius: 50%;
            border: 2px solid #dfdfdf;
            background-color: #f8f8f8;
        }
        .selected:after{
            background-color: rgb(60,141,188);
            border-color: rgb(98,172,113);
        }
        .filling_line{
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: rgb(60,141,188);
            transform-origin: left center;
            transition-property: transform;
            transition-duration: 0.3s;
            transition-timing-function: initial;
            transition-delay: initial;
        }

        .productinfo{
            line-height: 50px;
            font-size: 17px;
            text-align: center;
            color:white;
            margin: 10px;
            width: 300px;
            height: 50px;
            background-color: green;
            display: inline-block;
            float: right;
            border: solid 1px #e7eaec;
            border-radius: 3px;
        }
        #unit_name{
            line-height: 50px;
            text-align: center;
            margin:0px 20px 0px 20px;
            font-size: 17px;
            display: inline-block;
            float: left
        }
        .info{
            position:absolute;
            height: calc(100% - 45px);
            padding: 0px;
            top: 35px;
            width: 100% ;
        }
        .cellhead{
            width:calc(50% - 40px);
            height: 125px;
            float: left
        }
        .cell{
            border-radius: 3px;
            margin: 0 auto;
            width:100px;
            height:80px;
            background-color: gray;
            text-align: center;
            line-height: 80px;
            color: white;
        }

        ul{
            padding: 0px;
            margin: 0px;
        }
        .processstep{
            text-align: center;
            list-style: none;
            margin:5px;
            width: calc(100% - 10px);
            height: 50px;
            border-bottom: solid 1px #e7eaec;
            border-radius: 3px;
            line-height: 50px;
            box-shadow: 2px 2px 3px #e7eaec;
        }
    </style>
</head>
<body class="gray-bg">
<div>
    <div id="container">
        <div id="left_side">left_side</div>
        <div id="content"></div>
        <div id="right_side">
            <div style="user-select: none;width: 100px;height: 100%;float: right;font-size: 16px;"  onclick="Goto_systemhomepage()"  class="textbtn">返回首页</div>
            <div style="user-select: none;width: 100px;height: 100%;float: right;font-size: 16px;" class="textbtn">后台</div>
        </div>
    </div>
    <div class="area">
        <div class="time_line_box">
            <div class="time_line" style="width:80%;margin-left: 10%">
                <ol  id="Linecontent">
                    <li>
                        <a class="order_item" style="left:10%;">1</a>
                    </li>
                    <li>
                        <a class="order_item selected" style="left:20%;">2</a>
                    </li>

                </ol>

                <span class="filling_line" id="timeline" style="transform: scaleX(0.2);"></span>
            </div>
        </div>
        <div style="width:80%;margin-left: 10%">
            <div style="width:45%;margin-top: 30px;height:500px;border: solid 1px #e7eaec;border-radius: 3px;display: inline-block">
                <div style="width:100%;height: 60px;">
                    <span id="unit_name" style="">*单元</span>
                    <div class="productinfo" style="">该批次*产品正在加工</div>
                </div>
                <div style="width:100%;height: 400px;padding: 20px;position: relative">
                    <div class="info">
                        <div class="cellhead">
                            <p>产品编号</p>
                            <div class="cell">
                                1
                            </div>

                        </div>
                        <div class="cellhead">
                            <p>产品批次号</p>
                            <div class="cell">
                                1
                            </div>
                        </div>
                        <div class="cellhead">
                            <p>当前工序</p>
                            <div class="cell">
                                3
                            </div>
                        </div>
                        <div class="cellhead">
                            <p>加工时长</p>
                            <div class="cell">
                                1
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:45%;margin-top: 30px;height:500px;margin-left: 9%;display: inline-block;float: right">
                <div style="border: solid 1px black;border-radius: 3px;height:390px;width: 100%;">
                    <ul>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                        <li class="processstep">yi</li>
                    </ul>

                </div>
                <div style="height:100px;margin:5px 0px 5px 0px ;width: 100%;">
                    <nav aria-label="Page navigation" style="float: right">
                        <ul class="pagination pagination-lg">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

</div>


<th:block th:include="include :: footer" />
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/index.js?v=20201208}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{/}]];

    function Goto_systemhomepage() {
        window.location = ctx +  'generalControl/SystemHomePage';
    }

    function sleep(time){
        var timeStamp = new Date().getTime();
        var endTime = timeStamp + time;
        while(true){
            if (new Date().getTime() > endTime){
                return;
            }
        }
    }
</script>
<script>

    var step = 3; //当前第几步
    var olnumber =  4; //总共有多少步骤

    var content = "";
    for(var i=1;i<=olnumber;i++){
        content += " <li>\n" +
            "<a class=\"order_item\" style=\"left:"+(i/olnumber * 100).toFixed(2)+"%;\">"+i+"</a>\n" +
            "</li>";
    }
    document.getElementById("Linecontent").innerHTML = content;
    document.getElementById("timeline").style.transform = "scaleX("+(step/olnumber).toFixed(2)+")";

    function defaultGetProcessStepPageNumber(){

    }
    function defaultGetProcessStep() {
        var x = new FormData();
        x.append("y", 9);
    }
    function AjaxUse(url , data , result){
        $.ajax({
            url: url,
            type: "POST",
            async: false,
            cache: false, //此处设置false
            contentType: false, //必须设置false ,formupload1表单中必须设置enctype="multipart/form-data"
            processData: false, //必须设置false
            data: data,
            success: function(data) {
                return "success";
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
</script>
</body>
</html>
